import Vue from 'vue'
import Vuex from 'vuex'
import { getMusicUrl } from '@/api'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    audioEle: null, // 设置音频元素
    currentMusic: null,
    currentMusicIndex: 0,
    musicUrl: '',
    playing: false,
    playList: [],
    currentTime: 0,
    currentProgressTime: 0
  },
  getters: {
    getPlayList(state) {
      return state.playList
    },
    getMusicUrl(state) {
      return state.musicUrl
    },
    getCurrentMusicIndex(state) {
      return state.currentMusicIndex
    },
    getPlayingState(state) {
      return state.playing
    },
    getCurrentMusic(state) {
      return state.currentMusic
    },
    getMediaPlayer(state) {
      return state.audioEle
    },
    getCurrentTime(state) {
      return state.currentTime
    },
    getCurrentProgressTime(state) {
      return state.currentProgressTime
    }
  },
  mutations: {
    setPlayList(state, payload) {
      state.playList = payload
    },
    setPlayingState(state) {
      state.playing = !state.playing
    },
    setPlayingStateToTrue(state) {
      state.playing = true
    },
    setCurrentMusic(state, payload) {
      state.currentMusic = payload
    },
    setCurrentMusicIndex(state, payload) {
      state.currentMusicIndex = payload
    },
    setMediaPlayer(state, payload) {
      state.audioEle = payload
    },
    setCurrentTime(state, payload) {
      state.currentTime = payload
    },
    setCurrentProgressTime(state, payload) {
      state.currentProgressTime = payload
    }
  },
  actions: {
    // 获取当前音乐url
    async setPlayMusicUrl({ state }, id) {
      let res = await getMusicUrl(id)
      state.musicUrl = res.data[0].url
    },
    async playNextSong({ state }) {
      // 改变当前的index到至下一首歌的index
      state.currentMusicIndex === state.playList.length - 1 ? 
        this.commit('setCurrentMusicIndex', 0) :
        this.commit('setCurrentMusicIndex', state.currentMusicIndex + 1)
      
      // 更新当前的音乐
      this.dispatch('resetCurrentMusic')

      // 获取当前音乐的url
      await this.dispatch('setPlayMusicUrl', state.currentMusic.id)
      this.dispatch('playCurrentMusic')
    },
    async playPrevSong({ state }) {
      state.currentMusicIndex === 0 ? 
        this.commit('setCurrentMusicIndex', state.playList.length - 1) :
        this.commit('setCurrentMusicIndex', state.currentMusicIndex - 1)

      // 更新当前的音乐
      this.dispatch('resetCurrentMusic')

      // 获取当前音乐的url
      await this.dispatch('setPlayMusicUrl', state.currentMusic.id)
      this.dispatch('playCurrentMusic')
    },
    // 重置当前音乐
    resetCurrentMusic({ state }) {
      this.commit('setCurrentMusic', state.playList[state.currentMusicIndex])
      this.commit('setCurrentTime', 0)
      this.commit('setCurrentProgressTime', 0)
      this.commit('setPlayingStateToTrue')
    },
    // 播放当前音乐
    playCurrentMusic({ state }) {
      state.audioEle.src = this.getters.getMusicUrl
      state.audioEle.play()
    },
    // 点击/拖动进度条改变时间
    changeCurrentTime({ state }, percent) {
      const { duration } = state.currentMusic
      const currentTime = percent * duration
      state.audioEle.currentTime = currentTime
      this.commit('setCurrentTime', currentTime)
    }
  }
})
